<template>
  <div class="wpwork-common-layout">
    <div class="wpwork-common-layout-center">
      <el-row class="wpwork-common-search-box" :gutter="16">
        <el-form @submit.native.prevent>
          <el-col :span="3">
            <el-form-item label="名称">
              <el-input v-model="query.name" placeholder="请输入名称查询" clearable
                @keyup.enter.native="search()" />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="类别">
              <el-select v-model="query.type" placeholder="请选择类别" clearable filterable>
                <el-option v-for="item in typeList" :key="item.id" :label="item.fullName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="">
              <el-checkbox v-model="query.attendance">是否配置考勤</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="">
              <el-checkbox v-model="query.inspection">是否配置巡检</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="">
              <el-checkbox v-model="query.fence">是否配置围栏告警</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="">
              <el-checkbox v-model="query.grid">是否配置网络</el-checkbox>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">
            <el-form-item label="数据是否有效">
              <el-select v-model="query.enabledMark" placeholder="请选择是否有效" clearable filterable>
                <el-option v-for="item in categoryList" :key="item.id" :label="item.fullName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否参与位置描述">
              <el-select v-model="query.locationDesc" placeholder="请选择位置描述" clearable filterable>
                <el-option v-for="item in categoryList" :key="item.id" :label="item.fullName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="时段">
              <el-time-picker is-range v-model="query.creatorTime" range-separator="至"
                start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
              </el-time-picker>
            </el-form-item>
          </el-col> -->
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
              <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="wpwork-common-layout-main wpwork-flex-main">
        <div class="wpwork-common-head" style="justify-content: flex-start;">
          <el-button type="primary" icon="el-icon-plus" @click="addHandle()">新增</el-button>
          <!-- <el-button type="primary" icon="el-icon-download">导出选择记录</el-button>
          <el-button type="primary" icon="el-icon-plus"
            @click="openCollaboration()">新增协同任务</el-button>
          <el-button type="primary" icon="el-icon-download">模版导出</el-button>
          <el-button type="primary" icon="el-icon-download">数据导出</el-button>
          <el-button type="primary" icon="el-icon-upload2">数据导入</el-button> -->
          <!-- <div class="wpwork-common-head-right">
            <el-tooltip effect="dark" :content="$t('common.refresh')" placement="top">
              <el-link icon="icon-ym icon-ym-Refresh wpwork-common-head-icon" :underline="false"
                @click="initData()" />
            </el-tooltip>
          </div> -->
        </div>
        <wpwork-table v-loading="listLoading" :data="list"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="name" label="名称" show-overflow-tooltip width="200" />
          <el-table-column prop="type" label="资源类别" width="200" />
          <el-table-column prop="enabledMark" label="数据有效" width="150">
            <template slot-scope="scope">
              <i v-if="scope.row.enabledMark == 1" class="el-icon-check"
                style="color: #5AC725;font-size: 20px;"></i>
              <i v-else class="el-icon-close" style="color: #F14141;font-size: 20px;"></i>
            </template>
          </el-table-column>
          <el-table-column prop="location" label="位置信息" width="120">
            <template slot-scope="scope">
              <i v-if="scope.row.location" class="el-icon-check"
                style="color: #5AC725;font-size: 20px;"></i>
              <i v-else class="el-icon-close" style="color: #F14141;font-size: 20px;"></i>
            </template>
          </el-table-column>
          <el-table-column prop="nfc" label="NFC标签" width="120">
            <template slot-scope="scope">
              <i v-if="scope.row.nfc" class="el-icon-check"
                style="color: #5AC725;font-size: 20px;"></i>
              <i v-else class="el-icon-close" style="color: #F14141;font-size: 20px;"></i>
            </template>
          </el-table-column>
          <el-table-column prop="mapShow" label="地图显示" width="120">
            <template slot-scope="scope">
              <i v-if="scope.row.mapShow == 1" class="el-icon-check"
                style="color: #5AC725;font-size: 20px;"></i>
              <i v-else class="el-icon-close" style="color: #F14141;font-size: 20px;"></i>
            </template>
          </el-table-column>
          <el-table-column prop="locationShow" label="位置描述" width="120">
            <template slot-scope="scope">
              <i v-if="scope.row.locationShow == 1" class="el-icon-check"
                style="color: #5AC725;font-size: 20px;"></i>
              <i v-else class="el-icon-close" style="color: #F14141;font-size: 20px;"></i>
            </template>
          </el-table-column>
          <el-table-column prop="creatorTime" label="添加时间" :formatter="wpwork.tableDateFormat"
            width="140" />
          <el-table-column label="操作" fixed="right" width="100">
            <template slot-scope="scope">
              <el-button type="text" @click="addHandle(scope.row)">修改</el-button>
              <el-button size="mini" style="color:red;" type="text"
                @click="handleDel(scope.row.id)">
                删除
              </el-button>
            </template>
          </el-table-column>
          <el-table-column fixed="right" width="220">
            <template #header>
              <div
                style="line-height: 1.5;display: flex;justify-content: center;flex-direction: column;">
                <div style="text-align: center;">作业资源用于调度</div>
                <div style="display: flex;justify-content: space-around;">
                  <div>考勤</div>
                  <div>巡检</div>
                  <div>围栏</div>
                  <div>网格</div>
                </div>
              </div>
            </template>
            <template slot-scope="scope">
              <el-button type="text" @click="openAttendance(scope)"
                :style="scope.row.attendance == 1 ? 'color: #5AC725':'color: #929292'">{{ scope.row.attendance == 1 ? "已配置":"未配置" }}</el-button>
              <el-button type="text" @click="openInspection(scope)"
                :style="scope.row.inspection == 1 ? 'color: #5AC725':'color: #929292'">{{ scope.row.inspection == 1 ? "已配置":"未配置" }}</el-button>
              <el-button type="text" @click="openFence(scope)"
                :style="scope.row.fence == 1 ? 'color: #5AC725':'color: #929292'">{{ scope.row.fence == 1 ? "已配置":"未配置" }}</el-button>
              <el-button type="text" @click="openGrid(scope)"
                :style="scope.row.grid == 1 ? 'color: #5AC725':'color: #929292'">{{ scope.row.grid == 1 ? "已配置":"未配置" }}</el-button>
            </template>
          </el-table-column>
        </wpwork-table>
        <pagination :total="total" :page.sync="listQuery.currentPage"
          :limit.sync="listQuery.pageSize" @pagination="initData" />
      </div>
    </div>
    <Form v-if="formVisible" ref="Form" @refreshDataList="initData" />
    <Form2 v-if="formVisible2" ref="Form2" @refreshDataList="initData" />
    <Form3 v-if="formVisible3" ref="Form3" @refreshDataList="initData" />
    <Form4 v-if="formVisible4" ref="Form4" @refreshDataList="initData" />
    <Form5 v-if="formVisible5" ref="Form5" @refreshDataList="initData" />
    <Form6 v-if="formVisible6" ref="Form6" @refreshDataList="initData" />
  </div>
</template>

<script>
import Form from "./Form";
import Form2 from "./Form2";
import Form3 from "./Form3";
import Form4 from "./Form4";
import Form5 from "./Form5";
import Form6 from "./Form6";
import mixin from '@/mixins/generator/index'
import request from "@/utils/request";
export default {
  name: 'homeworkManagement',
  mixins: [mixin],
  components: { Form, Form2, Form3, Form4, Form5, Form6 },
  data() {
    return {
      selectValue: [],
      formVisible6: false,
      formVisible5: false,
      formVisible4: false,
      formVisible3: false,
      formVisible2: false,
      formVisible: false,
      list: [],
      query: {
        keyword: '',
        currentPage: 1,
        pageSize: 20,
        name: "",
        type: "",
        attendance: false,
        inspection: false,
        fence: false,
        grid: false,
      },
      typeList: [
        { id: "自助标点/考勤点", fullName: "自助标点/考勤点" },
        { id: "设备", fullName: "设备" },
        { id: "设施", fullName: "设施" },
        { id: "围栏", fullName: "围栏" },
        { id: "网格", fullName: "网格" }
      ],
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    handleDel(id) {
      this.$confirm('此操作将删除该条记录, 是否继续?', '提示', {
        type: 'warning'
      }).then(() => {
        request({
          url: `/api/example/WorkResources/deleteDataOne`,
          method: "post",
          params: { id: id }
        }).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: res.msg,
            });
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
          this.initData()
        })
      }).catch(() => { })
    },
    handleSelectionChange(value) {
      console.log("🚀 ~ :206 ~ handleSelectionChange ~ value:", value)
      this.selectValue = value.map(item => item.id);
      console.log("🚀 ~ :209 ~ handleSelectionChange ~ this.selectValue:", this.selectValue)
    },
    openCollaboration() {
      this.formVisible6 = true;
      this.$nextTick(() => {
        console.log("🚀 ~ :209 ~ handleSelectionChange ~ this.selectValue:", this.selectValue)
        this.$refs.Form6.init(this.selectValue);
      });
    },
    openGrid(value) {
      this.formVisible5 = true;
      this.$nextTick(() => {
        this.$refs.Form5.init(value.row.gridId, value.row.id, value.row.name);
      });
    },
    openFence(value) {
      this.formVisible4 = true;
      this.$nextTick(() => {
        this.$refs.Form4.init(value.row.fenceId, value.row.id, value.row.name);
      });
    },
    openInspection(value) {
      console.log("🚀 ~ :231 ~ openInspection ~ value:", value)
      this.formVisible3 = true;
      this.$nextTick(() => {
        this.$refs.Form3.init(value.row.inspectionId, value.row.id, value.row.name);
      });
    },
    openAttendance(value) {
      console.log("🚀 ~ :237 ~ openAttendance ~ value:", value)
      this.formVisible2 = true;
      this.$nextTick(() => {
        this.$refs.Form2.init(value.row.attendanceId, value.row.id, value.row.name);
      });
    },
    addHandle(value) {
      console.log("🚀 ~ :243 ~ addHandle ~ value:", value)
      this.formVisible = true;
      this.$nextTick(() => {
        this.$refs.Form.init(value ? value.id : '');
      });
    },
    initData() {
      request({
        url: `/api/example/WorkResources/List`,
        method: "post",
        params: this.query
      }).then((res) => {
        console.log("🚀 ~ :122 ~ initData ~ res:", res)
        this.list = res.data.list;
        this.list.forEach(item => {
          item.creatorTime = this.formatLocalDateTime(item.creatorTime);
        })
        console.log("🚀 ~ :152 ~ initData ~ this.list:", this.list)
      });
    },
    formatLocalDateTime(arr) {
      const [year, month, day, hour, minute, second, nano] = arr;
      const millisecond = Math.floor(nano / 1000000);
      const d = new Date(year, month - 1, day, hour, minute, second, millisecond);

      const pad = (n) => n.toString().padStart(2, '0');
      return `${year}-${pad(month)}-${pad(day)} ${pad(hour)}:${pad(minute)}:${pad(second)}.${Math.floor(millisecond)}`;
    },
    reset() {
      this.query = {
        keyword: '',
        currentPage: 1,
        pageSize: 20,
        name: "",
        type: "",
        attendance: false,
        inspection: false,
        fence: false,
        grid: false,
      }
      this.initData();
    },
    search() {
      this.initData();
    },
  }
}
</script>